<template>
  <div id="view">
    <div>
      <h3>基本信息</h3>
      <div>
        <p>
          <span class="red"
            >&#160;&#160;&#160;&#160;&#160;&#160;&#160;*&#160;</span
          ><span>姓名：</span><el-input v-model="name"></el-input>
        </p>
        <p>
          <span class="red"
            >&#160;&#160;&#160;&#160;&#160;&#160;&#160;*&#160;</span
          ><span>性别：</span>
          <el-radio v-model="sex" label="0">男</el-radio>
          <el-radio v-model="sex" label="1">女</el-radio>
        </p>
        <p>
          <span class="red">*&#160;</span><span>出生日期：</span
          ><el-date-picker
      v-model="birthday"
      type="date"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
        </p>
        <p>
          <span class="red">*&#160;</span><span>最高学历：</span
          ><el-select v-model="education">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          <span class="red">*&#160;</span><span>毕业院校：</span
          ><el-input v-model="school"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>所学专业：</span
          ><el-input v-model="subject"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>毕业时间：</span
          ><el-date-picker
      v-model="Graduation"
      type="date"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
        </p>
        <p>
          <span class="red">*&#160;</span><span>手机号码：</span
          ><el-input v-model="tel"></el-input>
        </p>
        <p>
          <span class="red">&#160;&#160;</span><span>电子邮箱：</span
          ><el-input v-model="email"></el-input>
        </p>
      </div>
      <h3>资历信息</h3>
      <div>
        <p>
          <span class="red">*&#160;</span><span>所在单位：</span
          ><el-input v-model="company"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>单位所在地区：</span
          ><el-input v-model="area"></el-input>
        </p>
        <p>
          <span class="red">&#160;</span><span>所属行业：</span
          ><el-input v-model="industry"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>专业技术系列：</span
          ><el-input v-model="succession"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>资格专业：</span
          ><el-input v-model="Professional"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>专业技术资格名称：</span
          ><el-input v-model="technology"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>获取资格时间：</span
          ><el-date-picker
      v-model="getTime"
      type="date"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
        </p>
        <p>
          <span class="red">*&#160;</span><span>聘任时间：</span
          ><el-date-picker
      v-model="appointment"
      type="date"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
        </p>
        <p>
          <span class="red">*&#160;</span><span>专业技术职务资格证书：</span
          ><button>上传</button
          ><img
            src="https://img1.baidu.com/it/u=2264266069,1639890723&fm=26&fmt=auto&gp=0.jpg"
            alt=""
          />
        </p>
        <h3>账号信息</h3>
        <p>
          <span class="red">*&#160;</span><span>证件类型：</span
          ><el-select v-model="IDcard">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          <span class="red">*&#160;</span><span>证件号码：</span
          ><el-input v-model="cardnum"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>密码：</span
          ><el-input v-model="password"></el-input>
        </p>
        <p>
          <span class="red">*&#160;</span><span>确认密码：</span
          ><el-input v-model="repassword"></el-input>
        </p>
      </div>
      <div id="footer">
        <div>
          <el-checkbox v-model="checked1"
            >本人承诺以上所填信息真实准确，如因个人填报信息虚假，本人愿意承担产生的一切责任。</el-checkbox
          >
        </div>
        <div>
          <el-checkbox v-model="checked2">统一遵守用户服务协议。</el-checkbox
          ><span class="point">点击查看服务协议</span>
        </div>
        <button>返回首页</button>
        <button @click="send()">提交注册</button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
#view {
  margin-top: 10px;
  color: rgb(102, 102, 102);
  h3 {
    margin: 40px 0;
    text-align: left;
  }
  span {
    font-size: 12px;
  }
  p {
    text-align: right;
    margin-right: 50%;
    margin-bottom: 10px;
    button {
      background: rgb(52, 152, 219);
      width: 96px;
      height: 34px;
      color: #fff;
      outline: none;
      border: none;
      cursor: pointer;
    }
    img {
      width: 140px;
      margin-left: 10px;
    }
  }
  /deep/.el-input {
    width: 220px;
    height: 30px;
    display: inline-block;
    margin-left: 20px;
  }
  /deep/.el-date-editor {
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-input__inner {
    width: 220px;
    height: 30px;
  }
  /deep/.el-radio {
    margin-left: 20px;
    margin-right: 62px;
  }
}
/deep/.el-step__title {
  color: rgb(102, 102, 102);
  font-size: 14px;
  font-weight: 600;
}
/deep/.el-steps {
  margin-top: 50px;
}
.red {
  color: red;
}
#footer {
  width: 500px;
  margin: 0 auto;
  text-align: left;
  margin-top: 30px;
  div {
    font-size: 12px;
    color: rgb(153, 153, 153);
    margin-top: 10px;
  }
  .point {
    color: rgb(64, 158, 255);
    cursor: pointer;
  }
  button {
    width: 138px;
    height: 38px;
    border: 1px solid rgb(217, 217, 217);
    background: #fff;
    cursor: pointer;
    margin-top: 50px;
    margin-left: 80px;
    color: rgb(153, 153, 153);
  }
}
</style>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      school: "",
      name: "",
      sex: "",
      birthday: "",
      Graduation: "",
      subject: "",
      tel: "",
      email: "",
      company: "",
      area: "",
      industry: "",
      succession: "",
      Professional: "",
      technology: "",
      appointment: "",
      getTime: "",
      checked1: "",
      checked2: "",
      education: "",
      options: [
        {
          value: "选项1",
          label: "小学",
        },
        {
          value: "选项2",
          label: "初中",
        },
        {
          value: "选项3",
          label: "高中",
        },
        {
          value: "选项4",
          label: "本科",
        },
        {
          value: "选项5",
          label: "专科",
        },
        {
          value: "选项6",
          label: "研究生",
        },
        {
          value: "选项7",
          label: "博士",
        },
      ],
      IDcard: "",
      options2: [
        {
          value: "选项1",
          label: "身份证",
        },
        {
          value: "选项2",
          label: "护照",
        },
      ],
      cardnum: "",
      password: "",
      repassword: "",
    };
  },
  mounted() {
    sessionStorage.setItem("RegisterIndex", "1");
    sessionStorage.setItem("fName", "PersonalRegister");
  },
  methods:{
    send(){
      this.$axios({
        url:'/staff/registerStaff',
        data:{
          name:this.name,
          sex:this.sex,
          birth:this.birthday,
          educate:this.education,
          school:this.school,
          major:this.subject,
          graduation:this.Graduation,
          phone:this.tel,
          email:this.email,
          unit:this.company,
          area:this.area,
          industry:this.industry,
          professionSeries:this.succession,
          profession:this.Professional,
          qualification:this.technology,
          qualificationTime:this.getTime,
          appointmentTime:this.appointment,
          type:this.IDcard,
          certificate:this.cardnum,
          password:this.password
        },
        method:'post'
      }).then(res=>{
        if(res.data.msg=='注册成功'){
          this.$router.push('/home')
        }else{
          this.$alert(res.data.msg, '注册失败', {
          confirmButtonText: '确定'
        });
        }
      })
    }
  }
};
</script>